<template>
    <el-row class="productattributeedit">
        <el-col :span="24" class="content-header">
            商品参数配置--修改
            <span class="left-10">
                <el-button type="text" @click="global.goPage($router, 'productparam', {});">返回</el-button>
            </span>
        </el-col>
        <el-card class="box">
            <el-row>
                <el-col :span="18" :offset="1">
                    <el-form :model="paramDateForm" label-width="150px" :label-position="labelPosition">
                        <el-form-item label="产品类别：" required>
                            <el-col :span="20">
                                <el-input v-model="paramDateForm.category" placeholder="产品类别"></el-input>
                            </el-col>
                            <el-col :span="4" class="i-button">
                                <el-button @click="selectCategory">选择</el-button>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="主属性名称：" required>
                            <el-input v-model="paramDateForm.attrName" placeholder="主属性名称"></el-input>
                        </el-form-item>
                        <el-form-item label="主属性显示顺序：" required>
                            <el-input v-model="paramDateForm.attrOrder" placeholder="主属性显示顺序"></el-input>
                        </el-form-item>
                        <el-row class="childreninput">
                            <el-col :span="24" v-for="(item, index) in paramDateForm.childrenAttr" :item="item" :key="item.name" :index="index">
                                <el-col :span="10">
                                    <el-form-item label="子属性名称：" required  >
                                        <el-input v-model="item.name" :placeholder="'子属性名称' + (index + 1)"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9" :offset="1">
                                    <el-form-item label="子属性显示顺序：" required>
                                        <el-input v-model="item.order" :placeholder="'子属性显示顺序' + (index + 1)"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4" class="i-button">
                                    <i v-if="(index+1) == paramDateForm.childrenAttr.length" class="fa fa-plus fa-2x" aria-hidden="true" @click="addChildren(index)"></i>
                                    <i v-if="index > 0 && (index+1) == paramDateForm.childrenAttr.length" class="fa fa-minus fa-2x" aria-hidden="true" @click="deleteChildren(index)"></i>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="submitParamForm">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
</template>
<script>
import './edit.scss';
import router from '@/router/index';

export default {
    data() {
        return {
            labelPosition : this.global.labelPosition,
            paramDateForm : {
                category : "",
                attrName : "",
                attrOrder : "",
                childrenAttr : [{
                    name : "",
                    order : ""
                }]
            }
        }
    },
    methods: {
        submitParamForm : function(){

        },
        addChildren : function(){
            this.paramDateForm.childrenAttr.push({
                name : "",
                order : ""
            })
        },
        deleteChildren : function(){
            this.paramDateForm.childrenAttr.pop();
        },
        selectCategory : function(){

        }
    },
    watch: {

    },
    mounted: function() {

    },
    created: function() {
         
    },
    beforeDestroy: function() {

    }
}
</script>